<template>
  <div>
    <myDivider name="巡查类别"></myDivider>

    <div>
      <el-input style="width: 160px;margin-left: 10px;" v-model="keywords" placeholder="巡查类别名称"
        @keyup.enter.native="SouSuo" clearable></el-input>

      <el-button type="primary" style="margin-top: 20px; margin-left: 15px" @click="SouSuo">查询</el-button>
      <el-button style="margin-top: 20px; margin-left: 15px" @click="reset">重置</el-button>

      <div style="display: flex;justify-content: flex-end;">
        <el-button type="success" @click="addClick">添加</el-button>
        <el-button type="danger" plain style="margin-left: 15px" @click="batchDelete">删除</el-button>
      </div>
    </div>

    <div>
      <el-table :data="tableData" ref="table" @select="selectTable" @select-all="selectAllTable"
        style="width: 100%;margin-top: 50px;">
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column prop="categoryName" label="巡查类别" align="center">
          <template slot-scope="scope">
            <span style="color:#4095e5; cursor: pointer;" @click="detailClick(scope.row)">{{ scope.row.categoryName }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="count" label="巡查码数量" align="center">
          <template slot-scope="scope">
            <span style="color:#4095e5; cursor: pointer;" @click="QRcodeClick(scope.row)">{{ scope.row.count }}</span>
          </template>
        </el-table-column>


        <!-- <el-table-column prop="areaName" label="地址">
            <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" :content="scope.row.areaName" placement="top-start">
              <span>{{ scope.row.areaName == null || scope.row.areaName == '' ? '—' :
                scope.row.areaName.length > 7 ?
                  "..." + scope.row.areaName.substring(scope.row.areaName.length - 7,
                    scope.row.areaName.length) : scope.row.areaName }}</span>
            </el-tooltip>
          </template>
</el-table-column> -->

        <el-table-column label="操作" width="200px" align="center">
          <template slot-scope="scope">
            <div class="textBtn">
              <el-row>
                <el-col class="el" :span="12">
                  <span style="color: #5fadff;cursor: pointer;font-weight: 600;"
                    @click="generateClick(scope.row)">生成巡查码</span>
                </el-col>
                <el-col class="el" :span="6">
                  <span style="color: #5fadff;cursor: pointer;font-weight: 600;"
                    @click="updateClick(scope.row)">编辑</span>
                </el-col>
                <el-col class="el" :span="6">
                  <span style="color: red;cursor: pointer;font-weight: 600;" @click="deleteClick(scope.row)">删除</span>
                </el-col>
              </el-row>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页器 -->
    <myPagination :total="total" :pageNum="pageNum" @PageChange="PageChange" @pageSizeChange="pageSizeChange">
    </myPagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      logOnUser: {},
      keywords: '',
      pageNum: 1,
      pageSize: 10,
      total: 6,

      tableData: [], //表格数据
      tableActiveArr: []//选中的表格
    }
  },
  activated() {
    this.tableActiveArr= []
    this.logOnUser = JSON.parse(sessionStorage.getItem('logOnUser'))
    this.reset()
  },
  methods: {

    addClick() {
      this.$router.push('/PatrolTypeAdd?scene=add')
    },
    updateClick(row) {
      this.$router.push('/PatrolTypeAdd?scene=update&id='+row.id)
    },
    detailClick(row) {
      this.$router.push('/PatrolTypeAdd?scene=detail&id='+row.id)
    },

    generateClick(row) { //生成巡查码
      if(!row.codeContent){
        this.$message.error('缺少扫码内容，无法生成巡查码')
        return
      }
      this.$router.push(`/PatrolTypeGenerate?categoryName=${row.categoryName}&id=${row.id}`)
    },
    QRcodeClick(row) {
      this.$router.push('/generateDetailAll?id='+row.id)
    },

    async deleteClick(item) {
      this.$confirm('是否删除该巡查类别?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let res = await this.$api.patrol.myPatrolCategoryBatchDelete({
          "ids": JSON.stringify([item.id])
        })
        if (res.code == 200) {
          this.$message({
            message: '删除成功',
            type: 'success'
          });
          this.getTableList()
        } else {
          this.$message.error(res.message)
        }
      }).catch(() => {

      });

    },
    //  总表格列表=====================================================
    exportCode() {

    },
    batchDelete() {
      if (this.tableActiveArr.length == 0) {
        this.$message.error('未选择要删除的数据')
      } else {
        this.$confirm('是否删除选中数据?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          let res = await this.$api.patrol.myPatrolCategoryBatchDelete({
            "ids": JSON.stringify(this.tableActiveArr)
          })
          if (res.code == 200) {
            this.$message({
              message: '删除成功',
              type: 'success'
            });
            this.getTableList()
            this.tableActiveArr = []
          } else {
            this.$message.error(res.message)
          }
        }).catch(() => {

        });
      }
    },
    selectTable(selection, row) {
      console.log(selection, row, '单选');
      let haveRow = false
      selection.forEach(el => {
        if (el.id == row.id) {
          haveRow = true
        }
      })
      if (haveRow) {  //新增
        this.tableActiveArr.push(row.id)
      } else {        //去除
        this.tableActiveArr.forEach((el, i) => {
          if (el == row.id) {
            this.tableActiveArr.splice(i, 1)
          }
        })
      }

    },
    async selectAllTable(selection) {
      if (selection.length > 0) { //全部选中
        this.tableActiveArr = []
        let res = await this.$api.patrol.myGetSelectIdsArray({
          "categoryName": this.keywords, //巡查类别名称
          "unitType": this.logOnUser.unitType, //单位名称 机关agency 机构company 系统system 必填
          "unitId": this.logOnUser.unitId //单位id 系统传0
        })
        if (res.code == 200) {
          this.tableActiveArr = res.data
        } else {
          this.$message.error(res.message)
        }

      } else { //全部取消
        this.tableActiveArr = []
      }
    },
    pageSizeChange(e) {
      this.pageNum = 1
      this.pageSize = e
      this.getTableList()
    },
    PageChange(e) {

      this.pageNum = e
      this.getTableList()
    },
    SouSuo() {
      this.pageNum = 1
      this.getTableList()
    },
    reset() {
      this.keywords = ''
      this.pageNum = 1
      this.SouSuo()
    },
    async getTableList() {
      let res = await this.$api.patrol.myGetCategoryList({
        "categoryName": this.keywords, //巡查类别名称
        "unitType": this.logOnUser.unitType, //单位名称 机关agency 机构company 系统system 必填
        "unitId": this.logOnUser.unitId, //单位id 系统传0
        "pageNum": this.pageNum,
        "pageSize": this.pageSize
      })
      console.log(res, '巡查类别列表');
      if (res.code == 200) {
        if (res.data.list.length == 0 && this.pageNum != 1) {
          this.pageNum = 1
          this.getTableList()
          return
        }
        this.tableData = res.data.list;
        this.total = res.data.total;

        //  回显表格选中的元素
        if (this.tableActiveArr.length > 0) {
          this.tableData.forEach((el, i) => {
            this.tableActiveArr.forEach((ell, ii) => {
              if (el.id == ell) {
                this.$nextTick(() => {
                  this.$refs.table.toggleRowSelection(this.tableData[i], true)
                })
              }
            });
          })
        }
      } else {
        this.$message.error(res.message)
      }

    },
    // =====================================================总表格列表
  }
}
</script>

<style lang="less" scoped>
.textBtn {
  position: relative;

  /deep/ .el-row {
    display: flex;
    justify-content: center;
  }

  .el {
    display: block;
    position: relative;

    &:nth-child(n+2) {
      &::after {
        position: absolute;
        left: -1px;
        top: 50%;
        content: '';
        width: 2px;
        transform: translateY(-50%) scale(0.5, 1);
        height: 10px;
        background-color: #aaa;
      }
    }
  }
}
</style>